<template>
  <div class="login-container w-full h-full justify-center items-center">
    <div>
      <el-tabs type="border-card">
        <el-tab-pane label="登录">
          <el-form label-position="right" label-width="60px">
            <el-form-item label="账号：">
              <el-input v-model="state.username" />
            </el-form-item>
            <el-form-item label="密码：">
              <el-input v-model="state.password" type="password" />
            </el-form-item>
            <el-row justify="center">
              <el-col :span="4">
                <el-button type="primary" @click="onLogin"> 登录</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-checkbox
                  v-model="state.isAgree"
                  class="checkBox"
                  label="同意用户使用准则"
                  name="type"
                />
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="注册">
          <el-form label-position="right" label-width="100px">
            <el-form-item label="邮箱：">
              <el-input v-model="state.email" />
            </el-form-item>
            <el-form-item label="密码：">
              <el-input v-model="state.password" type="password" />
            </el-form-item>
            <el-form-item label="确认密码：">
              <el-input v-model="state.confirmPassword" type="password" />
            </el-form-item>
            <el-form-item label="验证码：">
              <el-row justify="space-between">
                <el-col :span="18">
                  <el-input v-model="state.identifyCode" class="inpWidth" type="password" />
                </el-col>
                <el-col :span="5">
                  <el-button plain type="primary"> 获取验证码</el-button>
                </el-col>
              </el-row>
            </el-form-item>

            <el-row justify="center">
              <el-col :span="4">
                <el-button type="primary" @click="onRegister"> 注册</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-checkbox
                  v-model="state.isAgree"
                  class="checkBox"
                  label="同意用户使用准则"
                  name="type"
                />
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script lang="ts" setup>
import CryptoUtils from '@/utils/CryptoUtils'

const state = reactive({
  username: '',
  email: '',
  password: '',
  isAgree: '',
  confirmPassword: '',
  identifyCode: ''
})
// import type { CurrentUser } from '@/types/user'
//
// const state = reactive<LoginFormStateType>({
//     email: '',
//     password: '',
//     isAgree: '',
//     confirmPassword: '',
//     identifyCode: ''
// })
const router = useRouter()
const onLogin = async () => {
  console.log(await CryptoUtils.encryptData('aaa'))

  // const token = await axiosInstance.post<string>('/api/admin/adminUser/login')
  // CacheManager.setToken(token)
  // await router.push('/')
}
const crypto = window.crypto
const subtle = crypto.subtle

async function encryptData(publicKey: CryptoKey, data: string): Promise<string> {
  const encoder = new TextEncoder()
  const dataBuffer = encoder.encode(data)
  const encryptedBuffer = await subtle.encrypt(
    {
      name: 'RSA-OAEP'
    },
    publicKey,
    dataBuffer
  )
  return bufferToHex(encryptedBuffer)
}

function bufferToHex(buffer: ArrayBuffer): string {
  const bytes = new Uint8Array(buffer)
  let hex = ''
  for (let i = 0; i < bytes.length; i++) {
    hex += bytes[i].toString(16).padStart(2, '0')
  }
  return hex
}

function base64ToBuffer(base64: string): ArrayBuffer {
  const binaryString = atob(base64)
  const bytes = new Uint8Array(binaryString.length)
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i)
  }
  return bytes.buffer
}

async function importPublicKey(base64Key: string): Promise<CryptoKey> {
  const keyBuffer = base64ToBuffer(base64Key)

  console.log(keyBuffer)
  const publicKey = await window.crypto.subtle.importKey(
    'spki', // 导入的密钥格式
    keyBuffer,
    {
      name: 'RSA-OAEP',
      hash: 'SHA-256'
    },
    false, // 是否可提取
    ['encrypt'] // 用途
  )
  return publicKey
}

function hexToBuffer(hex: string): ArrayBuffer {
  const bytes = new Uint8Array(hex.length / 2)
  for (let i = 0; i < hex.length; i += 2) {
    bytes[i / 2] = parseInt(hex.substr(i, 2), 16)
  }
  return bytes.buffer
}

async function decryptData(privateKey: CryptoKey, encryptedHex: string): Promise<string> {
  const encryptedBuffer = hexToBuffer(encryptedHex)
  const decryptedBuffer = await window.crypto.subtle.decrypt(
    {
      name: 'RSA-OAEP'
    },
    privateKey,
    encryptedBuffer
  )
  const decoder = new TextDecoder()
  return decoder.decode(decryptedBuffer)
}
const onRegister = async () => {}
</script>

<style scoped>
.login-container {
  display: flex;

  & > div {
    display: block;
    width: 100%;
    max-width: 460px;
  }
}
</style>
